<template>
    <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>班级分类</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
        <el-collapse v-model="activeName" accordion @change="handleChange">
            <el-collapse-item :title="item.name" :name="i" v-for="(item, i) in classdata" :key="i">
                <div class="sub" v-for="(sub, index) in item.class" :key="index"
                    :class="{ btbor: index === item.class.length - 1 }">
                    {{ sub.cname }}
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import { getclasslist, getclasslistbyid } from '@/apis/class';
import type { CollapseModelValue } from 'element-plus'
// @ts-ignore
import { Userstore } from '@/stores/user.js';
const userstore = Userstore()
const classdata = ref<any>([])
const activeName = ref<string>('1')
const handleChange = (val: CollapseModelValue) => {
    console.log(val)
}
const classlist = async () => {
    if (userstore.userinfo.roleid == 2) {
        const res = await getclasslistbyid({subid:userstore.userinfo.subid})
        classdata.value = res.data.data
    }
    else {
        const res = await getclasslist()
        classdata.value = res.data.data
    }
}
onMounted(() => {
    classlist()
})
</script>
<style lang='scss' scoped>
.info {
    margin-top: 15px;

    .sub {
        font-size: 16px;
        padding: 8px 0;
        border-top: 1px solid black;
    }

}

.btbor {
    border-bottom: 1px solid black;
}

:deep(.el-collapse-item__title) {
    font-weight: bold;
    font-size: 18px;
}
</style>